<template>
	<v-content ref="content" padding-bottom="100">
		<v-statusbar class="status-bar"></v-statusbar>
		<div class="header padding">
			<div class="title">学习</div>
			<div class="badge">提升</div>
			<!-- <image class="search" src="/static/image/icon-search.png"></image> -->
		</div>

		<div class="banner" v-if="bannerList.length">
			<u-swiper :list="bannerList" previousMargin="47rpx" nextMargin="47rpx" circular radius="5" bgColor="none"
				interval="5000" @change="onSwiperChange"></u-swiper>
			<div class="dot">
				<div class="item" :class="[
					{
						active: index == bannerCurrent,
					},
				]" v-for="(_item, index) in bannerList" :key="index"></div>
			</div>
		</div>

		<div class="progress-card" v-for="item in progressList" :key="item.id">
			<div class="progress-content">
				<div class="title" @click="toPage('/pages/learn/details?id=' + item.id)">{{ item.courseName }}</div>
				<div class="progress-line">
					<div class="progress-bar">
						<div class="progress-bar-inner"
							:style="[{ width: (item.finishCoursewares / item.totalCoursewares).toFixed(2) * 100 + '%' }]"
							:class="{ 'progress-complete': item.finishCoursewares >= item.totalCoursewares }">
						</div>
					</div>
					<div class="icon" :class="{ success: item.finishCoursewares >= item.totalCoursewares }">
						<uni-icons v-if="item.finishCoursewares >= item.totalCoursewares" type="checkmark" size="18"
							color="#00c853" />
					</div>
				</div>
				<div class="message">
					学习进度 <span class="tip">{{ item.finishCoursewares }} / {{ item.totalCoursewares }}</span>
					<!-- <div class="date">截止2020-10-10</div> -->
				</div>
			</div>
		</div>

		<div class="article-title padding">
			课程推荐
			<div class="more arrow-right" @click="toPage('/pages/learn/list')">查看更多</div>
		</div>

		<div class="article-list padding">
			<div class="item" v-for="(item, index) in article.list" :key="index"
				@click="toPage('/pages/learn/details', { id: item.id })">
				<div class="image-wrap">
					<image class="image" :src="item.coverImg" mode="aspectFill"></image>
				</div>
				<div class="noimage" :style="{ 'backgroundColor': colors[index % 4] }">
					<div class="downtitle" :style="{ 'color': index % 4 === 0 ? '#000' : '#fff' }">
						{{ item.courseName }}
					</div>
					<div class="message">{{ item.totalMembers || 0 }}人学过</div>
				</div>
			</div>
			<div class="item"></div>
		</div>

		<v-tabbar current="1"></v-tabbar>
	</v-content>
</template>

<script>
import mixins from "@/mixins"

export default {
	name: "learn",
	mixins: [mixins],
	data() {
		return {
			bannerList: [],
			bannerCurrent: 0,
			colors: ['#e3fe37', '#4586fc', '#f58b41', '#a170fe'],

			article: {
				list: [],
				page: 1,
				total: 0,
			},
			progressList: [],
		}
	},
	computed: {},
	methods: {
		init() {
			this.getBanner()
			this.getArticle()
			this.getProgressList()
		},
		async getBanner() {
			const data = await this.$axios.get("/api/system/castleBanner/list")
			this.bannerList = data.map(item => item.bannerUrl)
		},
		async getArticle() {
			const { records, total } = await this.$axios.get("/api/study/course/studyCourse/page", {
				isRecommend: 1,
				currentPage: this.article.page,
				size: 4,
			})
			this.article.list = records
			this.article.total = total
		},
		async getProgressList() {
			const data = await this.$axios.get("/api/study/course/studyCourse/schedulelist")
			this.progressList = data
		},

		onSwiperChange({ current }) {
			this.bannerCurrent = current
		},
	},
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

.progress-card {
	margin: 30rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
	overflow: hidden;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 6rpx;
		background: $primary;
		border-radius: 0 3rpx 3rpx 0;
	}

	&:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.08);
	}
}

.progress-content {
	padding: 30rpx 30rpx 30rpx 40rpx;
}

.progress {
	border-bottom: none;
	padding: 0;
	margin: 0;
}

.title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 5rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.downtitle {
	height: 64rpx;
	line-height: 64rpx;
	font-size: 28rpx;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.progress-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.progress-bar {
	flex: 1;
	background: #f5f5f5;
	border-radius: 20rpx;
	height: 20rpx;
	overflow: hidden;
	position: relative;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
		animation: shimmer 2s infinite;
	}

	@keyframes shimmer {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}
}

.progress-bar-inner {
	background: linear-gradient(90deg, $primary 0%, #017aff 100%);
	width: 0;
	height: 100%;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: inherit;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
		animation: shine 2s infinite;
	}

	&.progress-complete {
		background: linear-gradient(90deg, #00c853 0%, #4caf50 100%);
	}

	@keyframes shine {
		0% {
			left: -100%;
		}

		100% {
			left: 200%;
		}
	}
}

.icon {
	flex: none;
	width: 40rpx;
	height: 40rpx;
	margin-left: 20rpx;
	background: #f5f5f5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;

	&.success {
		background: #e8f5e8;
		border-color: #00c853;
	}
}

.message {
	height: auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #666;
	font-size: 26rpx;

	.tip {
		color: $primary;
		margin-left: 8rpx;
		font-weight: 600;
	}

	.date {
		margin-left: auto;
		color: #999;
	}
}

.progress {
	border-bottom: 1px solid #f2f2f2;
	padding-top: 15rpx;
	padding-bottom: 10rpx;
	margin-bottom: 10rpx;

	.title {
		line-height: 95rpx;
		font-size: 34rpx;
		font-weight: 700;
	}

	.progress-line {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.progress-bar {
			flex: 1;
			background: #e4e4e4;
			border-radius: 20px;
			height: 16rpx;
			overflow: hidden;

			.progress-bar-inner {
				background: $primary;
				width: 0;
				height: 100%;
				transition: width 0.15s;
				border-radius: inherit;
			}
		}

		.icon {
			flex: none;
			width: 20rpx;
			height: 20rpx;
			margin-left: 15rpx;
			color: #e4e4e4;
			position: relative;
			border: 1px solid currentColor;
			border-radius: 50%;

			&::before {
				content: "";
				position: absolute;
				top: -3rpx;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				width: 10rpx;
				height: 5rpx;
				transform: rotate(-45deg);
				border-bottom: 1px solid currentColor;
				border-left: 1px solid currentColor;
			}

			&.success {
				color: $uni-color-success;
			}
		}
	}

	.message {
		height: 74rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #808080;
		font-size: 24rpx;

		.tip {
			color: $primary;
			margin-left: 5rpx;
		}

		.date {
			margin-left: auto;
		}
	}
}

.banner {
	padding: 0 20rpx;

	.banner-container {
		position: relative;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(1, 149, 255, 0.15);
		overflow: hidden;
		padding: 15rpx;
		transition: all 0.3s ease;
	}

	dot {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		item {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: rgba(1, 149, 255, 0.3);
			margin: 0 10rpx;
			transition: all 0.3s ease;

			&.active {
				background: #0195ff;
				width: 40rpx;
				border-radius: 8rpx;
				transform: scale(1.1);
			}
		}
	}
}
</style>
